import React, { useState, useEffect } from 'react'
import { Search as Search1 } from 'react-vant';
import { ArrowLeft } from '@react-vant/icons';
import './search.css'
import { Cell } from 'react-vant'
import { getHotList, getSeaList } from '../../api';
import { useNavigate } from 'react-router-dom';

export default function Search() {
    let navigate = useNavigate()

    const [value, setValue] = useState('');
    let [hotList, setHotList] = useState([])
    let [goodList, setGoodList] = useState([])
    useEffect(() => {
        getHotList().then(res => {
            console.log(res, 7);
            setHotList(res.data.data)
        })
    }, [])

    const getList = () => {
        getSeaList(value).then(res => {
            console.log(res, 6);
            setGoodList(res.data.data)
        })
    }
    return (
        <div>
            <div className="searchHead">
                <ArrowLeft onClick={() => navigate(-1)} />
                <Search1 value={value} onChange={setValue} placeholder="请输入搜索关键词" />
                <span onClick={getList}>搜索</span>
            </div>
            {/* 短路运算 */}
            {console.log(goodList, 8)}
            {goodList.length !== 0 ? (
                <div>
                    {
                        goodList?.map(item => {
                            return <div key={item.proid}>
                                <img src={item.img1} alt="" />
                                <p>{item.proname}</p>
                                <p>￥{item.originprice}</p>
                            </div>
                        })
                    }
                </div>
            ) : (
                <div>
                    <Cell title='热门搜索' value='' size='large' />
                    {
                        hotList.map(item => {
                            return <span key={item.wordid} className='hot'>{item.keyword}</span>
                        })
                    }
                </div>
            )}
        </div>
    )
}
